<!doctype html>

<meta charset="utf-8">
<title>Dagre D3 Demo: Clusters</title>
{%load staticfiles%}
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'bower_components/dagre-d3/demo.css' %}">
<script src="{% static 'dist/js/d3.v4.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'bower_components/dagre-d3/tipsy.css' %}">
<script src="{% static 'bower_components/dagre-d3/jquery.tipsy.js' %}"></script>
<script src="{% static 'bower_components/dagre-d3/dagre-d3.js' %}"></script>

<style id="css">
  body {
    font: 300 14px 'Helvetica Neue', Helvetica;
  }
  
  .node rect,
  .node circle,
  .node ellipse {
    stroke: #333;
    fill: #fff;
    stroke-width: 1px;
  }
  g.type-start > rect {
  fill: #00ffd0;
  }
  g.type-end > rect {
  fill: red;
  }

  .edgePath path {
    stroke: #333;
    fill: #333;
    stroke-width: 1.5px;
  }
  
  </style>
  
  <h1 id='h1'></h1>
  <p id='workflow_desc'></p>
  
  <svg width=1024 height=1500><g/></svg>
  <!-- <svg><g/></svg> -->
  <script id="js">
    // Create a new directed graph
    // Create the input graph
    var g = new dagreD3.graphlib.Graph()
    .setGraph({})
    .setDefaultEdgeLabel(function() { return {}; });
    

    // 获取工作流详情
    // 获取工作流的状态
    // 获取工作流的流转
    $.ajax({
        url:"/api/v1.0/workflows/"+ "{{ workflow_id }}",
        type:'GET',
        contentType: "application/json; charset=utf-8",
        success: function(result) {
          console.log('sss');
          $(document).attr("title",'流程图-' + result.data.name);
          $("#h1").html('流程图-' + result.data.name);
          var workflow_desc = '创建人:'+ result.data.creator + ' 展现表单:' + result.data.display_form_str +' 限制表达式:' + result.data.limit_expression +' 通知脚本:' + result.data.notices + ' 查看权限校验:' + result.data.view_permission_check
          $("#workflow_desc").html(workflow_desc);
        }
    });
    $.ajax({
      url:"/api/v1.0/workflows/"+ "{{ workflow_id }}" + "/states",
        type:'GET',
        contentType: "application/json; charset=utf-8",
        data: {per_page:200}, //200应该够获取全部状态了
        success: function(result) {
          if (result.code === 0) {
            state_list = result.data.value;
            // var states = {};
            var states = new Array();
            state_list.forEach(function(state0){
              states[state0.id] = {label: state0.name, otherAttr:state0};
              if (state0.type_id ==1){
                g.setNode(state0.id, {label: state0.name, class:"type-start", description:state0.participant, otherAttr:state0});
              }
              else if (state0.type_id ==2){
                g.setNode(state0.id, {label: state0.name, class:"type-end", description:state0.participant, otherAttr:state0});
              }
              else {
                g.setNode(state0.id, {label: state0.name, description:state0.participant, otherAttr:state0});
              }
              
            });
            // Object.keys(states).forEach(function(state) {
            //   var value = states[state];
            //   value.label = state;
            //   value.rx = value.ry = 5;
            //   g.setNode(state, value);
            // });
            // console.log(states);
            g.nodes().forEach(function(v) {
            var node = g.node(v);
            // Round the corners of the nodes
            node.rx = node.ry = 5;
            });
            //获取transiton
            $.ajax({
            url:"/api/v1.0/workflows/"+ "{{ workflow_id }}" + "/transitions",
              type:'GET',
              contentType: "application/json; charset=utf-8",
              data: {per_page:200}, //200应该够获取全部状态了
              success: function(result) {
                if (result.code === 0) {
                  transition_list = result.data.value;
                  transition_list.forEach(function(transition0){
                    if (transition0.condition_expression !== '[]'){
                      //条件表达式逻辑，这里根据流转的源状态id+100000保证setnode时id不会出现与其他id重复
                      g.setNode(transition0.source_state_id+100000, {label: "条件表达式", style: "fill: #afa", shape: "diamond", otherAttr:{type_id: 0}});
                      g.setEdge(transition0.source_state_id, transition0.source_state_id+100000, {
                        label: transition0.name,
                        curve: d3.curveBasis
                      });
                      JSON.parse(transition0.condition_expression).forEach(function(condition_expression0){
                        g.setEdge(transition0.source_state_id+100000, condition_expression0.target_state_id, {
                        label: condition_expression0.expression,
                        curve: d3.curveBasis
                      });
                      })
                    }else {
                      g.setEdge(transition0.source_state_id, transition0.destination_state_id, {
                        label: transition0.name,
                        curve: d3.curveBasis
                      });
                    }
                  })
                  // Create the renderer
                  var render = new dagreD3.render();

                  // Set up an SVG group so that we can translate the final graph.
                  var svg = d3.select("svg"),
                      inner = svg.append("g");
                  
                  // Set up zoom support
                  var zoom = d3.zoom()
                      .on("zoom", function() {
                        inner.attr("transform", d3.event.transform);
                      });
                  svg.call(zoom);

                  // Simple function to style the tooltip for the given node.
                  var styleTooltip = function(name, description) {
                    return "<p>" + name + "</p><p class='description'>" + description + "</p>";
                    // return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
                  };

                  // Run the renderer. This is what draws the final graph.
                  render(inner, g);

                  inner.selectAll("g.node")
                  .attr("title", function(v) { 
                    var otherAttr=g.node(v).otherAttr;
                    // var description=otherAtrr.participant;
                    // var description = "参与人:" + otherAtrr.participant + "<br>" + "参与人类型:" + otherAtrr.participant_type_id ;
                    // var description = JSON.stringify(otherAttr, null, 4); 

                    var description = "";
                    var stateTypeDesc = "";
                    var isHiddenDesc = "否";
                    var orderId = 0;
                    var participant = "";
                    var participantTypeDesc = "";
                    var stateFieldStr="";
                    var workflowID = 0;

                    
                    if (otherAttr.type_id === 0){
                      stateTypeDesc = '普通状态';
                    }else if (otherAttr.type_id === 1){
                      stateTypeDesc = "开始状态";
                    } else if (otherAttr.type_id === 1){
                      stateTypeDesc = "结束状态";
                    };
                    if (otherAttr.is_hidden){
                      isHiddenDesc = "是";
                    };
                    if(otherAttr.participant_type_id===1){
                      participantTypeDesc = "个人";
                    }else if (otherAttr.participant_type_id===2){
                      participantTypeDesc = "多人";
                    }else if (otherAttr.participant_type_id===3){
                      participantTypeDesc = "部门";
                    }else if (otherAttr.participant_type_id===4){
                      participantTypeDesc = "角色";
                    }else if (otherAttr.participant_type_id===5){
                      participantTypeDesc = "变量";
                    }else if (otherAttr.participant_type_id===6){
                      participantTypeDesc = "脚本";
                    }else if (otherAttr.participant_type_id===7){
                      participantTypeDesc = "工单字段";
                    }else if (otherAttr.participant_type_id===8){
                      participantTypeDesc = "父工单字段";
                    }else if (otherAttr.participant_type_id===9){
                      participantTypeDesc = "多人";
                    };
                    description += "顺序ID: "+ otherAttr.order_id + "</br>";
                    if (otherAttr.sub_workflow_id){
                      description += "子工作流ID:" + otherAttr.sub_workflow_id
                    };
                    description += "状态类型: "+ stateTypeDesc + "</br>";
                    description += "是否隐藏: "+ isHiddenDesc + "</br>";
                    description += "参与人类型: "+ participantTypeDesc + "</br>";
                    description += "参与人: "+ otherAttr.participant + "</br>";
                    description += "状态表单: "+  JSON.stringify(otherAttr.state_field_str, null, 4)  + "</br>";
                    
                    return styleTooltip(v, description) })
                  .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });

                  var initialScale = 0.75;
                  svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
                  svg.attr('height', g.graph().height + 240);

                }
                
              }
            });            
          }
          
        }
    })
    
    
</script>
